<template>
	<view class="">
		<view class="jui_flex jui_flex_justify_between  jui_bg_fff o_fixed" style="border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;padding: 20rpx 80rpx;">
			<view class="jui_flex_col_center" v-for="(item,index) in tab" :key="index" @tap="chooseTab(item, index)">
				<view class="">
					{{item.text}}
				</view>
				<view class="jui_mar_t12" :class="tabIndex==index?'on':''">
					
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="jui_mar_2432">
			<!-- <view class="jui_bg_fff jui_bor_rad_30 jui_mar_b20" v-for="(item, index) in list" :key="index" @tap="jump(`/pages/user/order/orderDetail?id=${item.id}`)"> -->
			<view class="jui_bg_fff jui_bor_rad_30 jui_mar_b20" v-for="(item, index) in list" :key="index">
				<view class="jui_flex jui_flex_items_center jui_flex_justify_between jui_pad_2432">
					<view class="jui_fc_999">
						{{item.orderTime}}
					</view>
					
					<view class="jui_fc_fuse" >
						<template v-if="item.orderstatus == 3">待发货</template>
						<template v-if="item.orderstatus == 4">待收货</template>
						<template v-if="item.orderstatus == 5">已完成</template>
					</view>
				</view>
				<view class="jui_flex jui_flex_items_center jui_pad_b20" style="border-bottom: 1px solid #F5F5F5;">
					<image :src="item.path" mode="" style="width: 160rpx;height: 160rpx;"></image>
					<view class="jui_flex_col jui_flex_justify_between" style="width: 70%;margin-left: 3%;height:260rpx;">
						<view class="">
							<view class="jui_fc_333 jui_font_w600 jui_fs29 jui_ellipsis_2">
								{{item.serialnumber}}
							</view>
							<view class="jui_fc_333 jui_font_w500 jui_fs29 jui_ellipsis_2">
								{{item.goodsName}}
							</view>
							<!-- <view class="jui_fc_999 jui_fs26 jui_mar_t16" >
								规格：{{item.shops_format}}
							</view> -->
							<view class="jui_fc_999 jui_fs26 jui_mar_t16" >
								{{item.addressName}}
							</view>
							<view class="jui_fc_999 jui_fs26 jui_mar_t16" v-if="(tabIndex == 2 || tabIndex == 3) && item.deliveryName">
								快递：{{item.deliveryName}}({{item.deliveryno}})
							</view>
						</view>
						<view class="jui_flex jui_flex_justify_end ">
							总价¥ {{item.paymoney}}
						</view>
					</view>
				</view>
				<view class="jui_flex jui_flex_justify_end jui_pad_2432" v-if="tabIndex == 2">
					<!-- <view class="jui_bor_rad_40 jui_mar_r20 jui_fc_zhuse" style="padding: 8rpx 36rpx;border: 1px solid #318BF2;font-size: 28rpx;" @tap.stop="tixing(item)" v-if="item.status == 1">
						提醒发货
					</view> -->
					<view class="jui_bg_zhuse jui_bor_rad_40  jui_fc_fff" style="padding: 8rpx 26rpx;font-size: 28rpx;" @tap.stop="receive(item)">
						确认收货
					</view>
				</view>
			</view>
			<empty position="jui_fixed" v-if="list.length < 1"></empty>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tab:[
					{text:'全部', type:1},
					{text:'待发货', type:2},
					{text:'待收货', type:3},
					{text:'已完成', type:4},
				],
				tabIndex:0,
				q: {
					type: 1,
					pageNumber: 1,
					pageSize: 10
				},
				isLoading: true,
				hasMore: true,
				loadStatus: '',
				list: []
			}
		},
		onLoad(opt) {
			this.tabIndex = opt.tabIndex || 0;
			this.q.type = this.tab[this.tabIndex].type;
		},
		onShow() {
			this.q.pageNumber = 1;
			this.q._token = uni.getStorageSync('token');
			this.list = [];
			this.getList();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.pageNumber += 1;
				this.getList();
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.back();
			return true;
		},
		methods: {
			back() {
				// uni.navigateBack({
				// 	delta: 3
				// });
				uni.switchTab({
				    url: '/pages/home/home'
				});
			},
			chooseTab(item, index){
				this.tabIndex = index;
				this.q.type = item.type;
				this.q.pageNumber = 1;
				this.list = [];
				this.getList();
			},
			getList() {
				this.isLoading = true;
				this.$api.getOrder(this.q).then(res => {
					this.isLoading = false;
					if(res.ok&&res.data){
						if (res.data.rows.length != 0) {
							this.list = res.data.rows;
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
					
				});
			},
			tixing(item){
				this.$api.remind({id:item.id}).then(res => {
					if(res.code == 1){
						this.$msg(res.msg);
					}
				});
			},
			receive(item){
				let _token = uni.getStorageSync('token');
				let params = {
					_token:_token,
					orderId:item.id,
					receiptPhoto:''
				}
				this.$api.yesOrder(params).then(res => {
					if(res.ok){
						this.$msg(res.msg);
						setTimeout(()=>{
							this.q.pageNumber = 1;
							this.list = [];
							this.getList();
						}, 500)
					}
				});
			}
		}
	}
</script>

<style>
	.on {
		width: 30rpx;
		height: 10rpx;
		background-color: #ff8429;
		border-radius: 10rpx;
	}
	.o_fixed{
		width: 100%;
		position: fixed;
		/* top:88rpx; */
		/*  #ifdef APP-PLUS  */
		top: 0;
		/*  #endif  */
		left: 0;
		z-index: 1;
	}
</style>
